<template>
  <div class="demo">
    <div class="demo-title">多选</div>
    <div class="demo-content">
      <Cascader
        v-model:value="value"
        style="width: 100%"
        multiple
        max-tag-count="responsive"
        :options="options"
        placeholder="Please select"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import Cascader from '@sscd/cascader';
  import type { CascaderProps } from '@sscd/cascader';
  const value = ref<string[]>([]);
  const options: CascaderProps['options'] = [
    {
      label: 'Light',
      value: 'light',
      children: new Array(20)
        .fill(null)
        .map((_, index) => ({ label: `Number ${index}`, value: index })),
    },
    {
      label: 'Bamboo',
      value: 'bamboo',
      children: [
        {
          label: 'Little',
          value: 'little',
          children: [
            { label: 'Toy Fish', value: 'fish' },
            { label: 'Toy Cards', value: 'cards' },
            { label: 'Toy Bird', value: 'bird' },
          ],
        },
      ],
    },
  ];
</script>
